<template>
  <!-- 收入统计 => 公司 -->
  <div class="pages refund">
    <div class="pageLevel" v-if="!sub">
      <!-- 头部 -->
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm" size="small">
          <el-form-item label="付款时间:" style="margin-left:10px">
            <el-date-picker :clearable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label-width="130px" label="企业名称:" style="margin-left:50px">
            <el-input class="input" v-model="selectdata.keyword" size="small" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="" prop="wxser" class="wxelForm" label-width="25px">
            <el-button type="primary" @click="toPage" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
          <el-table-column prop="salesNo" label="订单号" align="center">
          </el-table-column>
          <el-table-column prop="payerName" label="企业名称" align="center">
          </el-table-column>
          <el-table-column prop="paymentType" label="收款类型" align="center" :formatter="paymentTypes">
          </el-table-column>
          <el-table-column prop="orderTime" label="单据日期" align="center" :formatter="trunTime">
          </el-table-column>
          <el-table-column prop="payTime" label="付款时间" align="center" :formatter="trunTime">
          </el-table-column>
          <el-table-column prop="orderPrice" label="订单总金额" align="center">
          </el-table-column>
          <el-table-column prop="price" label="收款金额" align="center">
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="text" class="addDetail" v-if="setRole('确认收款')" @click="cenVisible(scope.row,)">确认收款</el-button>
              <el-button size="small" type="text" class="addDetail" v-if="setRole('详情')" @click="routerPush('/financial-center/receivable-finance/collect-confirm/details-confirm',scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div> -->
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="确认收款" class="addshopname" :visible.sync="centerDialogVisible" width="540px">
      <div class="wxser">
        <div class="wxser-box1">企业名称：{{row.payerName}}</div>
        <div class="span-left">付款时间：{{row.payTime}}</div>
      </div>
      <div class="wxser">
        <div class="wxser-box1">订单总金额：{{row.orderPrice}}元</div>
        <div class="span-left">付款金额：{{row.price}} 元</div>
      </div>
      <div class="tips">
        是否确认收到款项？
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="receiptConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { findByPayList, receiptConfirm } from "@/api";
import util from "@/util";
import { mapState } from "vuex";
import s from "@/util/state";
export default {
  computed: mapState(["merchantId", "sub", "power"]),
  data() {
    return {
      row: {},
      orderNo: "",
      orderPrice: "",
      remainingPrice: "",
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        }
      },
      centerDialogVisible: false,
      value: [],
      status: "",
      name: "",
      pageSize: 10,
      total: 0,
      currentPage: 1,
      selectdata: {
        selects: ""
      },
      tableData: [],
      options: [],
      sum: ""
    };
  },
  created() {
    this.getTime();
  },
  mounted() {
    this.getdata();
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getdata();
        }
      },
      deep: true
    }
  },
  methods: {
    paymentTypes: s.paymentTypes,
    cancel() {
      this.row = {};
      // console.log(this.row);
      this.getdata();
      this.centerDialogVisible = false;
    },
    getdatetime(now, l = "-", m = ":") {
      now = parseInt(now);
      now = new Date(now);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      // let seconds = now.getSeconds()
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      return year + l + month + l + date;
    },
    trunTime(row, column, cellValue) {
      return util.foryear(cellValue);
    },
    cenVisible(row) {
      this.row = row;
      this.row.payTime = this.getdatetime(this.row.payTime);
      // console.log(this.row.payTime);
      this.centerDialogVisible = true;
    },
    receiptConfirm() {
      let postdata = {
        payNo: this.row.payNo
      };
      receiptConfirm(postdata).then(res => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: "确认收款成功",
            type: "success"
          });
          this.centerDialogVisible = false;
          this.getdata();
        }
      });
    },
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    //跳页
    toPage() {
      this.getdata(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getdata(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(this.pageSize, val);
    },
    getTime() {
      //---------------默认当前时间
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      if (m >= 1 && m <= 9) {
        m = "0" + m;
      }
      if (d >= 1 && d <= 9) {
        d = "0" + d;
      }
      let time = y + "-" + m + "-" + d;
      this.value[0] = time;
      this.value[1] = time;
    },
    routerPush(name, row) {
      util.routerTo(name, {
        payNo: row.payNo,
        paymentType: row.paymentType,
        salesId: row.salesId,
        purchaseId: row.purchaseId,
        payerName: row.payerName,
        orderTime: row.orderTime,
        orderPrice: row.orderPrice,
        price: row.price
      });
    },
    formatTimes: function(row) {
      return util.foryear(row.createTime) + " " + util.fortime(row.createTime);
    },
    getdata() {
      let postdata = {
        userId: this.merchantId,
        name: this.selectdata.keyword,
        startTime: this.value[0],
        endTime: this.value[1],
        type: 1
      };
      findByPayList(postdata).then(res => {
        this.tableData = res.data;
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].paymentType == 2) {
            // 取采购退货单号
            this.tableData[i].salesNo = this.tableData[i].purchaseNo;
          }
        }
        this.total = res.data.total;
      });
    }
  }
};
</script>
<style  scoped>
.refund .el-input__inner {
  height: 32px;
  line-height: 32px;
}
#app {
  text-align: inherit;
}
.refund .total-income {
  color: #606266;
  width: 100%;
  line-height: 55px;
  margin: 20px 0px 10px 0px;
  border-bottom: 1px solid #eee;
}
.refund .total-income .all-income {
  margin-left: 30px;
}
.refund .total-income .all-income span {
  margin-left: 10px;
}
.refund .tableSearch .el-select {
  width: 140px;
}
.refund .span1 {
  color: red;
  margin-left: 100px;
  font-size: 14px;
  font-weight: bold;
}
.wxser {
  line-height: 50px;
  margin-left: 10px;
  height: 50px;
  width: 520px;
}
.wxser div {
  float: left;
  width: 200px;
}
.wxser .span-left {
  margin-left: 20px;
}
.wxser .wxser-box1 {
  width: 300px;
}
.tips {
  text-align: center;
  margin: 30px 30px 0px 30px;
}
</style>
